//实现方法一
// 1.拿到所有的图片 dome 。
// 2.遍历每个图片判断当前图片是否到了可视区范围内。
// 3.如果到了就设置图片的 src 属性。
// 4.绑定 window 的 scroll 事件，对其进行事件监听。
function lazyload() {
    let viewHeight = document.body.clientHeight;
    let imgs = document.querySelectorAll("img[data-src]")
    imgs.forEach((item, index) => {
        if (item.dataset.src === '') {
            return;
        }
        let rect = item.getBoundingClientRect();
        // /Element.getBoundingClientRect() 方法返回元素的大小及其相对于视口的位置。
        if (rect.bottom >= 0 && rect.top < viewHeight) {
            //dataset获取HTML元素的自定义属性
            item.src = item.dataset.src
            item.removeAttribute('data-src')
        }
    })
}

function throttle(fn, delay) {
    let timer
    let prevTime
    return function (...args) {
        const currTime = Date.now()
        const context = this
        if (!prevTime) prevTime = currTime
        clearTimeout(timer)

        if (currTime - prevTime > delay) {
            prevTime = currTime
            fn.apply(context, args)
            clearTimeout(timer)
            return
        }

        timer = setTimeout(function () {
            prevTime = Date.now()
            timer = null
            fn.apply(context, args)
        }, delay)
    }
}


window.addEventListener('scroll', throttle(lazyload, 200))